<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        #app {
            width: 1024px;
            margin: 0 auto;
        }

        #userTable {
            margin-top: 20px;
        }

        #add-user-btn {
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
<div id="app">

    <el-row :gutter="20">
        <!-- 展示管理员列表 -->
        <el-col :span="6">
            <div>
                <h2>管理员列表</h2>
            </div>
        </el-col>
        <!-- 添加用户的按钮 -->
        <el-col :span="6" :offset="12">
            <div id="add-user-btn">
                <el-button type="primary" icon="el-icon-plus" round @click="dialogAddUserFormVisible = true">添加管理员账号
                </el-button>
            </div>
        </el-col>
    </el-row>

    <!-- 展现管理员列表的表格 -->
    <div id="userTable">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="管理员名称" width="250">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="250">
            </el-table-column>
            <el-table-column prop="password" label="密码" width="350">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 编辑用户按钮 -->
                    <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row,scope.$index)">
                    </el-button>
                    <!-- 删除用户按钮 -->
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(scope.$index)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 添加新用户所需的表单对话框，初始是隐藏的 -->
    <el-dialog title="添加新的管理员账号" :visible.sync="dialogAddUserFormVisible" width="25%">
        <el-form ref="addUserInfo" :model="addUserInfo" label-width="95px">
            <el-form-item label="管理员名称">
                <el-input v-model="addUserInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ]">
                <el-input v-model="addUserInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="addUserInfo.password"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="emptyAddUserInfo">取 消</el-button>
            <el-button type="primary" @click="addUser">添加</el-button>
        </div>
    </el-dialog>
    <!-- 编辑特定用户所需的表单对话框，初始是隐藏的 -->
    <el-dialog title="编辑管理员账号信息" :visible.sync="dialogUpdateUserFormVisible" width="25%">
        <el-form ref="editUserInfo" :model="editUserInfo" label-width="95px">
            <el-form-item label="管理员名称">
                <el-input v-model="editUserInfo.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="editUserInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="editUserInfo.password"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateUserFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser">更新</el-button>
        </div>
    </el-dialog>
</div>

<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                tableData: [], //用户对象数据
                dialogAddUserFormVisible: false,
                addUserInfo: {      //存储 添加用户的信息
                    email: '',      //邮箱
                    username: '',   //用户名称
                    password: ''    //密码
                },
                dialogUpdateUserFormVisible: false,
                editUserInfo: { //存储 要更新（编辑）用户的信息
                    email: '',//邮箱
                    username: '',//用户名称
                    password: '',//密码
                    indexOfItem: ''//被编辑的用户的索引
                }
            },
            methods: {
                //删除一个用户
                deleteUser(index) {
                    this.$confirm('此操作将永久删除此用户信息, 是否继续?', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                        let uID = this.tableData[index].uID; //存放对应用户在数据库中的主键
                        //发送ajax请求
                        axios.delete('http://localhost:8080/admins/' + uID)
                            .then(function (response) {
                                // handle success
                                // console.log(response.data);
                                // 数组删除某些元素语法：objArray.splice(index,cnt) :删除从第index个元素开始的cnt个元素
                                self.tableData.splice(index, 1);
                                self.$notify({
                                    title: '成功',
                                    message: '删除了一个管理员账号',
                                    type: 'success'
                                });
                            }).catch(() => {
                        });
                    })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        })
                        .finally(function () {
                            // always executed
                        });
                },
                //编辑一个用户
                editUser(user, index) {
                    this.editUserInfo.username = user.username;
                    this.editUserInfo.email = user.email;
                    this.editUserInfo.password = user.password;
                    this.editUserInfo.indexOfItem = index;  //更新索引
                    this.dialogUpdateUserFormVisible = true;
                },
                //更新一个用户信息
                updateUser() {

                    let newUser = {
                        email: '',//邮箱
                        username: '',//用户名称
                        password: '',//密码
                    };
                    newUser.username = this.editUserInfo.username;
                    newUser.email = this.editUserInfo.email;
                    newUser.password = this.editUserInfo.password;
                    let index = this.editUserInfo.indexOfItem;
                    let uID = this.tableData[index].uID; //存放对应用户在数据库中的主键
                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                    // console.log("Index:       " + this.editUserInfo.indexOfItem)
                    //发送ajax请求到服务器端更新用户
                    axios.put('http://localhost:8080/admins/' + uID, {
                        uID: uID,
                        username: newUser.username,
                        password: newUser.password,
                        email: newUser.email,
                        role: 0
                    })
                        .then(function (response) {
                            // handle success
                            console.log(response.data);

                            Vue.set(self.tableData, self.editUserInfo.indexOfItem, newUser);
                            self.dialogUpdateUserFormVisible = false;
                            self.$notify({
                                title: '成功',
                                message: '修改信息成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            // handle error
                            console.log(error);
                        })
                        .finally(function () {
                            // always executed
                        });
                },
                //添加一个用户
                addUser() {
                    //ajax发送 添加用户请求。。。。。。
                    // 发送ajax数据获取管理员列表数据
                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                    let newUser = {  //添加用户的表单
                        email: '',
                        username: '',
                        password: '',
                        uID: 0
                    };
                    newUser.username = this.addUserInfo.username;
                    newUser.email = this.addUserInfo.email;
                    newUser.password = this.addUserInfo.password;

                    axios.post('http://localhost:8080/admins', {
                        username: newUser.username,
                        password: newUser.password,
                        email: newUser.email,
                        role: 0
                    })
                        .then(function (response) {
                            // console.log(response.data);
                            // console.log("新用户的主键id： "+uId);
                            newUser.uID = response.data.uId;
                            console.log(newUser.uID);
                            //在axios里面用self来引用vue实例，因为在axios作用域内this不是vue实例，而是全局对象window
                            self.tableData.push(newUser);
                            self.dialogAddUserFormVisible = false;

                            self.$notify({
                                title: '成功',
                                message: '创建了一个管理员',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                emptyAddUserInfo() { //当用户取消添加操作时，需要将表单上绑定的数据清空
                    this.addUserInfo.email = '',      //邮箱
                        this.addUserInfo.username = '',   //用户名称
                        this.addUserInfo.password = ''    //密码

                    this.dialogAddUserFormVisible = false;  //控制添加表单 不可见
                }
            },

            // 生命周期函数created:在vue实例加载完成后，发送ajax请求，用返回的数据填充页面
            created: function () {
                // 发送ajax数据获取管理员列表数据
                let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                axios.get('http://localhost:8080/admins')
                    .then(function (response) {
                        // handle success
                        // console.log(response);
                        // console.log(typeof response);
                        // console.log(typeof response.data);
                        // console.log(typeof response.data[0].username);
                        self.tableData = response.data;//通过self间接访问vue实例
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
                    .finally(function () {
                        // always executed
                    });
            }
        }
    );
</script>


</body>

</html>